<template>
  <div class="goodsfen">
    <el-card>
    <el-row>
        <el-button type="success">
            <el-icon><ChromeFilled /></el-icon>
            新增上级分类
            </el-button>
            <el-table
            v-loading="loading"
            :data="tableData"
            style="width:100%">
            <el-table-column
            prop="value"
            label="下级分类">
            <el-icon><ArrowRight /></el-icon>
            </el-table-column>

            <el-table-column
            prop="id"
            label="id" />

            <el-table-column
            prop="value"
            label="icon">
            
            </el-table-column>

            <el-table-column
            prop="cz"
            label="操作">
            <template #default="{row}">
                <el-button-group>
                    <el-button type="primary" @click="bj(row)">
                        <el-icon><Document /></el-icon>
                        编辑</el-button>
                    <el-button type="success">
                        <el-icon><ChromeFilled /></el-icon>
                        新增</el-button> 
                    <el-button type="danger">
                        <el-icon><DeleteFilled /></el-icon>
                        删除</el-button>   
                </el-button-group>
            </template>
            </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            :page-sizes="[5,10,15,20]"
            :total="total"
            layout="total,sizes,prev,pager,next,jumper"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange" /></div>
    </el-row></el-card>
  </div>
</template>

<script setup>
import {ChromeFilled,Document,DeleteFilled,ArrowRight} from "@element-plus/icons-vue";
import { onMounted, reactive, ref } from "vue";
import request from '@/utils/request'
// import { useRouter } from "vue-router";


// const router=useRouter()
const loading=ref(false)
const tableData=ref([])
const total=ref(0)
const currentPage= ref(1)
const pageSize=ref(10)
const searchForm = reactive({
    id:'',
    value:'',
    categories:[]
})
const getGoodsList = async () =>{
    loading.value=true
    try{
        const res = await request({
            url:'/api/icon',
            method:'get',
            params:{
                pageNum:currentPage.value,
                pageSize:pageSize.value,
                ...searchForm
            }
        })
        tableData.value=res.data.records
        total.value-res.data.records
        console.log(res);
    }catch(error){
        console.error('获取商品类别失败：',error)
    }finally{
        loading.value=false
    }
}
const handleSizeChange = (val) =>{
    pageSize.value=val
    getGoodsList()
}
const handleCurrentChange = (val)=>{
    currentPage.value = val
    getGoodsList()
}
onMounted(()=>{
    getGoodsList()
})
</script>

<style scoped>

</style>